<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/public/common.jspf" %>
<!DOCTYPE html>
<html class="bootstrap-admin-vertical-centered">
<head>
    <title>Login page | Bootstrap 3.x Admin Theme</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="decorator" content="no">

    <!-- Bootstrap -->
    <link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/styles/css/bootstrap.min.css">
    <link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/styles/css/bootstrap-theme.min.css">

    <!-- Bootstrap Admin Theme -->
    <link rel="stylesheet" media="screen"
          href="${pageContext.request.contextPath}/styles/css/bootstrap-admin-theme.css">

    <!-- Custom styles -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/styles/css/custome.css">
    <style type="text/css">
        .alert {
            margin: 0 auto 20px;
        }
    </style>

    <!--Scripts-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery_validate/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(function () {

            // Setting width of the alert box
            var alert = $('.alert');
            var formWidth = $('.bootstrap-admin-login-form').innerWidth();
            var alertPadding = parseInt($('.alert').css('padding'));

            if (isNaN(alertPadding)) {
                alertPadding = parseInt($(alert).css('padding-left'));
            }

            $('.alert').width(formWidth - 2 * alertPadding);

        });

        //validate
        $(document).ready(function(){
            $('#loginForm').validate({
                rules:{
                    loginName:'required',
                    password:'required'
                },
                messages:{
                    loginName:'请输入用户名',
                    password:'请输入密码'
                }
            });
        });
    </script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="scripts/html5shiv.js"></script>
    <script type="text/javascript" src="scripts/respond.min.js"></script>
    <![endif]-->
</head>
<body class="bootstrap-admin-without-padding">
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <%@ include file="/WEB-INF/jsp/public/pageinfo.jspf" %>
            <s:form method="post" action="user_login" cssClass="bootstrap-admin-login-form" id="loginForm">
                <h1>登陆</h1>

                <div class="form-group">
                    <s:textfield cssClass="form-control" name="loginName" placeholder="用户名"/>
                    <s:fielderror fieldName="loginName"/>
                </div>
                <div class="form-group">
                    <s:password cssClass="form-control" name="password" placeholder="密码"/>
                    <s:fielderror fieldName="password"/>
                </div>
                <button class="btn btn-lg btn-primary" type="submit">提交</button>
                <s:a action="index" cssClass="btn btn-lg btn-default pull-right">返回</s:a>
            </s:form>
        </div>
    </div>
</div>

</body>
</html>

